<template>
  <el-table
    :data="tableData"
    stripe
    border
    style="width: 100%"
  >
    <el-table-column
      type="index"
      label="#"
      width="48"
    />
    <el-table-column
      prop="username"
      label="姓名"
    />
    <el-table-column
      prop="email"
      label="邮箱"
    />
    <el-table-column
      prop="mobile"
      label="电话"
    />
    <el-table-column
      prop="role_name"
      label="角色"
    />
    <el-table-column
      label="状态"
    >
      <template slot-scope="{row}">
        <el-switch
          v-model="row.mg_state"
          @change="changeState(row.id,$event)"
        />
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="220"
    >
      <template slot-scope="{row}">
        <action-buttons
          @distribute="$emit('distribute',row.username,row.role_name,row.id)"
          @delete="$emit('delete',row.id)"
          @edit="$emit('edit',row.id)"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { changeStateById } from '@/api/user'
import ActionButtons from '@/components/ActionButtons'
export default {
  components: { ActionButtons },
  props: {
    tableData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
    }
  },
  created() {

  },
  methods: {
    // 点击修改状态
    async changeState(id, state) {
      await changeStateById(id, state)
      this.$message.success('修改成功！')
      this.tableData.mg_state = state
    }
  }
}
</script>

<style scoped lang='scss'>
.el-table{
  margin: 15px 0;
  font-size: 12px;
}
</style>
